<!--
 * @Author: your name
 * @Date: 2019-10-22 09:06:18
 * @LastEditTime: 2019-11-01 10:53:01
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /e:\yjp\my_test\vue_plugins\src\views\Websocket.vue
 -->
<template>
<div class="container">
    <van-nav-bar title="keepalive" left-arrow fixed :border="false"
      @click-left='$router.push("/")'/>
    <van-cell-group>
        <van-field
            v-model="username"
            required
            clearable
            label="用户名"
            placeholder="请输入用户名"
        />
        <van-field
            v-model="mobile"
            required
            clearable
            label="手机号"
            placeholder="请输入手机号"
        />
        <van-field v-model="selectedtime"
        required
        disabled
        label="出生年月日"
        placeholder="请选择"
        >
        <van-button type="primary" slot="button" size="small" @click.stop="SelectTime">选择</van-button>
        </van-field>
        <van-field
            v-model="message"
            rows="2"
            autosize
            label="备注"
            type="textarea"
            maxlength="50"
            placeholder="请输入备注"
            show-word-limit
        />
    </van-cell-group>
    <van-popup
    v-model="show_time"
    position="bottom"
    >
    <van-datetime-picker
    v-model="time"
    :min-date="minDate"
    type="date"
    @cancel="Cancel"
    @confirm="Confirm"
    :formatter="formatter"
    />
    </van-popup>
</div>
</template>
<script>
export default {
    name:"keepAlive",
    data(){
        return{
            username:"",
            mobile:"",
            message:"",
            show_time:false,
            time:new Date(),
            minDate:new Date(1990,1,1)
        }
    },
    methods:{
        SelectTime(){
            this.show_time = true;
        },
        // 取消选择时间
        Cancel(){
            this.show_time = false;
        },
        // 确认选择事件
        Confirm(data){
            this.show_time = false;
        },
        // 时间格式化
        formatter(type,value){
            switch(type){
                case 'year':
                return `${value}年`;
                case 'month':
                return `${value}月`;
                case 'day':
                return `${value}日`;
            }
        }
    },
    computed:{
        selectedtime(){
            return new Date(this.time).toLocaleString().split(" ")[0].replace(/\//g,"-");
        }
    },
}
</script>
<style lang="less" scoped>

</style>